<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="../style/style.css">
</head>
<body>
<h1>xxx系统登录</h1>
 <hr/>
  <label>用户名</label><input id="username"/>
  <label>密码</label><input id="password"/>
  <button id="btnLogin">登录</button>


   <div id="msg">msg</div>
</body>

<script>
/*<!--
   1. 获得dom节点引用 ： 属性 、内容-innerHTML 文本=innerText
   2. 事件绑定
   3. 改变dom
          属性 : input button div class
              样式 : style className  classList
          内容-innerHTML
          文本=innerText
-->*/
     var messageBox = document.getElementById('msg');
     // messageBox.style.display='none';
     messageBox.className='hide'

     var btnLogin=  document.getElementById('btnLogin');// 获得 js 下 dom 节点/对象

     /**
      * 事件机制
      *     事件名称
      *     处理函数
      *     事件绑定
     * */
      btnLogin.onclick = function (event) {
          var username=  document.getElementById('username');
         //  id 、标签名称、类名、name
          //  document.getElementsByTagName('input')[0]
          //  document.getElementsByClassName()
          var password=  document.getElementById('password');

          if (username.value=='admin'&&password.value=='123456'){

              //messageBox.className='show success';

               messageBox.classList.add('show');
               messageBox.classList.add('success');
               messageBox.innerText ="登录成功";
          }else{

              //messageBox.className='show danger';
              messageBox.classList.remove('hide');
              messageBox.classList.add('show');
              messageBox.classList.add('danger');
              messageBox.innerHTML="<h3>登录失败</h3>"
          }
      }

      /***
       * 事件绑定
       * */
   /*   btnLogin.onclick = btnLoginClick; //语义化、可维护性
      btnLogin.addEventListener('click',btnLoginClick);

      function btnLoginClick() {

      }*/

</script>
</html>
